<template>
  <div>
    <el-container>
      <el-main>
        <div>
          <el-button size="mini" type="primary" @click="getrkdh" icon="el-icon-plus">新血袋入库</el-button>
          <el-button size="mini" type="primary" disabled icon="el-icon-edit">修改</el-button>
          <el-button size="mini" type="primary" disabled icon="el-icon-delete">删除</el-button>
          <el-button size="mini" type="primary" icon="el-icon-s-grid">批量导入</el-button>
          <el-button size="mini" type="primary" :disabled="saveDisabled" @click="saveXZPAll" icon="el-icon-s-management">保存</el-button>
          <el-button size="mini" type="primary" disabled icon="el-icon-back">撤销</el-button>
          <el-button size="mini" type="primary" icon="el-icon-printer">打印血袋条码</el-button>
          <el-button size="mini" type="primary">全部</el-button>
          <el-button size="mini" type="primary" icon="el-icon-zoom-in">查询</el-button>
        </div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="68px">
          <el-form-item label="血液来源">
            <el-input size="mini" v-model="formInline.ghdw"></el-input>
          </el-form-item>
          <el-form-item label="入库单号">
            <el-input size="mini" v-model="formInline.rkdh"></el-input>
          </el-form-item>
          <el-form-item label="入库方式">
            <el-input size="mini" v-model="formInline.rkfs"></el-input>
          </el-form-item>
          <el-form-item label="交接人">
            <el-select size="mini" v-model="formInline.jjczy" placeholder="可搜索" filterable>
              <el-option
                v-for="item in czyList"
                :key="item.account"
                :label="item.username"
                :value="item.account"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="68px">
          <el-form-item label="入库人">
            <el-select size="mini" v-model="formInline.rkczy" filterable placeholder="可搜索">
              <el-option
                v-for="item in czyList"
                :key="item.account"
                :label="item.username"
                :value="item.account"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" >
            <el-input size="mini" style="width:350px" v-model="formInline.bz"></el-input>
          </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%" :height="tableHeight">
          <el-table-column fixed type="selection" width="50"></el-table-column>
          <el-table-column fixed prop="id" label="ID" width="50"></el-table-column>
          <el-table-column fixed prop="mc" label="血液名称" width="200"></el-table-column>
          <el-table-column prop="aboxx" label="ABO血型" width="120"></el-table-column>
          <el-table-column prop="cgj" label="采购价" width="120"></el-table-column>
          <el-table-column prop="dw" label="单位" width="50"></el-table-column>
          <el-table-column prop="gg" label="规格" width="60"></el-table-column>
          <el-table-column prop="pym" label="拼音码" width="120"></el-table-column>
          <el-table-column prop="rhxx" label="RH血型" width="70"></el-table-column>
          <el-table-column prop="sl" label="库存数量" width="80"></el-table-column>
          <el-table-column prop="sybz" label="使用标志" width="80"></el-table-column>
          <el-table-column prop="xylx" label="血液类型" width="80"></el-table-column>
          <el-table-column prop="yjkc" label="预警库存数量"></el-table-column>
        </el-table>
        <!-- <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[50, 100, 150, 200]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          ></el-pagination>
        </div>-->
      </el-main>
      <el-aside :style="`height:${rightHeight}px`" width="310px">
        <el-tabs type="border-card">
          <el-tab-pane label="血制品">
            <el-form :rules="rules" class="rightForm" ref="form" :model="form" label-width="90px">
              <el-form-item label="拼音码检索">
                <el-select value-key="id" @change="xydmChange" size="mini" v-model="form.pym" filterable :filter-method="pymFilter">
                  <el-option
                    v-for="item in xydmFilter"
                    :key="item.id"
                    :label="item.mc"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="血袋编号" prop="xdh">
                <el-input size="mini" v-model="form.xdh"></el-input>
              </el-form-item>
              <el-form-item label="血液成分" prop="xymc">
                <el-input size="mini" v-model="form.xymc"></el-input>
              </el-form-item>
              <el-form-item label="血型" prop="aboxx">
                <el-input size="mini" v-model="form.aboxx"></el-input>
              </el-form-item>
              <el-form-item label="规格" prop="gg">
                <el-input size="mini" v-model="form.gg"></el-input>
              </el-form-item>
              <el-form-item label="单位" prop="dw">
                <el-input size="mini" v-model="form.dw"></el-input>
              </el-form-item>
              <el-form-item label="入库单号" prop="rkdh">
                <el-input disabled size="mini" v-model="form.rkdh"></el-input>
              </el-form-item>
              <el-form-item label="采集时间" prop="cjrq">
                <el-date-picker
                  size="mini"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  v-model="form.cjrq"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="失效时间" prop="yxq">
                <el-date-picker
                  size="mini"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  v-model="form.yxq"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="献血人">
                <el-input size="mini" v-model="form.xxr"></el-input>
              </el-form-item>
              <el-form-item label="存储位置">
                <el-input size="mini" v-model="form.ccwz"></el-input>
              </el-form-item>
              <el-form-item label="运输温度">
                <el-input size="mini" v-model="form.yswd"></el-input>
              </el-form-item>
              <el-form-item label="入库价" prop="rkj">
                <el-input size="mini" v-model="form.rkj"></el-input>
              </el-form-item>
              <el-form-item label="零售价" prop="lsj">
                <el-input size="mini" v-model="form.lsj"></el-input>
              </el-form-item>
              <el-form-item label="标签完整">
                <el-select size="mini" v-model="form.bqwz">
                  <el-option label="是" value="是"></el-option>
                  <el-option label="否" value="否"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="血袋破损" prop="mfx">
                <el-select size="mini" v-model="form.mfx">
                  <el-option label="是" value="是"></el-option>
                  <el-option label="否" value="否"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="溶血情况">
                <el-select size="mini" v-model="form.rxqk">
                  <el-option label="有" value="有"></el-option>
                  <el-option label="无" value="无"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="其他异常">
                <el-input size="mini" v-model="form.qtyc"></el-input>
              </el-form-item>
              <el-form-item label="备注信息">
                <el-input size="mini" v-model="form.bz"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="saveXZP('form')" size="mini" type="primary">保存</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="自体血"></el-tab-pane>
        </el-tabs>
      </el-aside>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        rkdh: "",
        bqwz: "",
        mfx: "",
        rxqk: "",
        rkdh: "",
        gg: "",
        xdh: "",
        cjrq: "",
        xxr: "",
        ccwz: "",
        yswd: "",
        bz: "",
        yxq: "",
        rkj: "",
        region: "",
        xymc: "",
        pym:{},
        dw:'',
        aboxx:'',
        qtyc:'',
        lsj:'',
        xydm:''
      },
      tableData: [],
      tableHeight: window.innerHeight - 104 - 28 - 40 - 56 - 20 - 61,
      rightHeight: window.innerHeight - 56 - 20 - 60,
      currentPage: 4,
      formInline: {
        jjczy: "",
        rkczy: "",
        rkfs: "",
        rkdh:'',
        bz:'',
        ghdw:''
      },
      czyList: [],
      xycfList: JSON.parse(localStorage.getItem("xydm")),
      xydmList: [],
      xydmFilter: [],
      rules: {
          xdh: [
            { required: true, message: ' ', trigger: 'blur' },
          ],
          xymc: [
            { required: true, message: ' ', trigger: 'blur' },
          ],
          aboxx: [
            { required: true, message: ' ', trigger: 'blur' },
          ],
          gg: [
            { required: true, message: ' ', trigger: 'blur' },
          ],
          dw: [
            { required: true, message: ' ', trigger: 'blur' },
          ],
          rkdh: [
            { required: true, message: ' ', trigger: 'blur' },
          ],
          yxq: [
            { required: true, message: ' ', trigger: 'blur' },
          ],
          rkj: [
            { required: true, message: ' ', trigger: 'blur' },
          ],
          mfx: [
            { required: true, message: ' ', trigger: 'blur' },
          ],
          lsj: [
            { required: true, message: ' ', trigger: 'blur' },
          ],
          cjrq: [
            { required: true, message: ' ', trigger: 'blur' },
          ],
        },
        saveDisabled:true
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //获取列表
    getkcxx() {
      this.$ajax.get(`/xk/getkcxx`, {}).then((res) => {
        this.tableData = res.data;
      });
    },
    //新增入库信息
    getrkdh() {
      this.$ajax
        .get(`/xk/getrkdh?czydm=${this.$cookies.get("userInfo").account}`, {})
        .then((res) => {
          this.formInline['rkdh'] = res.data;
          this.form['rkdh'] = res.data
        });
    },
    //操作员列表
    getczylist() {
      this.$ajax.get(`/admin/getczylist`, {}).then((res) => {
        this.czyList = res.data;
      });
    },
    //拼音码检索
    pymFilter(val) {
      let xydmList = [...this.xydmList];
      this.xydmFilter = xydmList.filter((item) => item.pym.indexOf(val) != -1);
    },
    xydmChange(val){
      Object.keys(val).forEach(el => {
        this.form[el] = val[el]
      })
      this.form['xydm'] = val['id']
    },
    saveXZP(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$ajax.post(`/xk/insertrkmx`, this.form).then((res) => {
          if (res.code == "1") {
            this.$message.error(res.msg);
          }else{
            this.$message({
              message: '保存成功',
              type: 'success'
            });
            this.$refs[formName].resetFields();
            this.saveDisabled = false
          }
        });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      
    },
    saveXZPAll(){
      this.$ajax.post(`/xk/insertrkzb`, this.formInline).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.$message({
            message: '保存成功',
            type: 'success'
          });
          this.saveDisabled = true
          this.getkcxx()
        }else{
          this.$message.error(res.msg);
        }
      })
    }
  },
  mounted() {
    this.xydmList = JSON.parse(localStorage.getItem("xydm"));
    this.xydmFilter = JSON.parse(localStorage.getItem("xydm"));
    this.getkcxx();
    this.getczylist();
  },
};
</script>
<style lang="less" scoped>
.demo-form-inline {
  margin-top: 7px;
  height: 40px;
}
.el-main {
  padding: 0;
}
.block {
  text-align: right;
  margin-top: 10px;
  padding-right: 10px;
}
.el-aside {
  border-left: 1px solid #dcdfe6;
  overflow: auto;
}
.rightForm {
  .el-form-item {
    margin-bottom: 0px;
  }
}
.rightForm {
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 182px;
  }
}
</style>